<template>
  <div>
    <div class="box">
      <div class="box0 box1"></div>
      <div class="box0 box2"></div>
      <div class="box0 box3"></div>
      <div class="box0 box4"></div>
      <div id="main" style="width: 30rem; height: 15rem"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "MyVueEcharts",

  data() {
    return {
      option: {
        title: {
          text: "新增确诊TOP10",
          left: "center",
          // 字体颜色
          textStyle: {
            color: "#ffffff",
            fontStyle: 100,
            fontSize: 12,
          },
        },
        grid: {
          left: 80,
          
        },
        xAxis: {
          type: "category",
          data: [
            "英国",
            "",
            "印度",
            "印度",
            "哥伦比亚",
            "",
            "小鬼子",
            "",
            "马来西亚",
            "",
          ],

          axisTick: {
            alignWithLabel: true,
          },
          //   显示轴线
          axisLine: {
            show: true,
            // 轴线的颜色
            lineStyle: {
              color: "#1a234a",
            },
          },
          // 轴文字的颜色
          axisLabel: {
            color: "#898da2",
          },
        },
        yAxis: {
          type: "value",
          //   显示纵轴线
          axisLine: {
            show: true,
            // 轴线的颜色
            lineStyle: {
              color: "#1a234a",
            },
          },
          // 轴文字的颜色
          axisLabel: {
            color: "#898da2",
          },
          //是否显示分割线
          splitLine: {
            show: true,
            lineStyle: {
              color: "#19234f",
            },
          },
        },
        series: [
          {
            // 柱形图
            type: "bar",

            // 数据
            data: [
              {
                name: "英国",
                value: 40000,
              },
              {
                name: "英国",
                value: 38000,
              },
              {
                name: "英国",
                value: 30000,
              },
              {
                name: "印度",
                value: 28000,
              },
              {
                name: "英国",
                value: 26000,
              },
              {
                name: "英国",
                value: 24000,
              },
              {
                name: "哥伦比亚",
                value: 20000,
              },
              {
                name: "英国",
                value: 19000,
              },
              {
                name: "英国",
                value: 17000,
              },
              {
                name: "马来西亚",
                value: 20000,
              },
            ],
            itemStyle: {
              // 圆角
              borderRadius: 30,
              //   柱条颜色
              color: "#2f89cf",
            },
            // 柱子的宽度
            barWidth: 10,
          },
        ],
      },
    };
  },

  mounted() {
    let main = document.querySelector("#main");
    let obj = echarts.init(main);
    obj.setOption(this.option);
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 31.25rem;
  height: 15.9375rem;
  border: 0.0625rem solid #06275b;
  position: relative;
  background-color: rgba(1, 11, 56, 0.1);
  .box0 {
    width: 0.625rem;
    height: 0.625rem;
  }
  .box1 {
    border-top: 0.0625rem solid #02a4b4;
    border-left: 0.0625rem solid #02a4b4;
  }
  .box2 {
    border-top: 0.0625rem solid #02a4b4;
    border-right: 0.0625rem solid #02a4b4;
    position: absolute;
    right: 0;
    top: 0;
  }
  .box3 {
    border-bottom: 0.0625rem solid #02a4b4;
    border-left: 0.0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .box4 {
    border-bottom: 0.0625rem solid #02a4b4;
    border-right: 0.0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>